<template>
  <div class="app-container home-page">
    <PageTabs
      class="alive-tabs"
      :tabdate="tabdate">
    </PageTabs>
    <div class="tabs-content">
      <div style="height: 100%;width: 153px">
        <div v-for="item in tagList" :key="item.value" :class="backNode == item.value ?'left-tag-selected':'left-tag'" @click="changeCss(item.value)">
          <el-row>
            <el-col :span="4" >
              <div :class="'transition-content' + item.value"></div>
            </el-col>
            <el-col :span="20" style="height: 50px;line-height: 50px">
              <el-radio style="margin-left: -13px" v-model="radio" :label="item.value">{{item.name}}</el-radio>
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="height: 100%;width: calc(100% - 153px);border-left: 1px solid #EBEFFB">
        <div class="right-content">
          <el-row :gutter="20">
            <el-col :span="6" v-for="item in cardList" :key="item.id">
              <div class="right-content-card" @click="toWork()">

              </div>
            </el-col>
          </el-row>
        </div>
      </div>
<!--      <el-row style="height: 100%">-->
<!--        <el-col :span="3" style="height: 100%">-->
<!--          <div style="height: 100%">-->
<!--            <div v-for="item in tagList" :key="item.value" :class="backNode == item.value ?'left-tag-selected':'left-tag'" @click="changeCss(item.value)">-->
<!--              <el-row>-->
<!--                <el-col :span="4" >-->
<!--                  <div :class="'transition-content' + item.value"></div>-->
<!--                </el-col>-->
<!--                <el-col :span="20" style="height: 50px;line-height: 50px">-->
<!--                  <el-radio style="margin-left: -13px" v-model="radio" :label="item.value">{{item.name}}</el-radio>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="21" style="height: 100%">-->
<!--          <div class="right-content">-->
<!--            <el-row :gutter="20">-->
<!--              <el-col :span="6" v-for="item in cardList" :key="item.id">-->
<!--                <div class="right-content-card" @click="toWork()">-->

<!--                </div>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PageTabs from '@/components/PageTabs'

export default {
  name: 'workBench',
  components: {
    PageTabs
  },
  data() {
    return {
      tabdate:{
        tabname:['客户基础信息','流程进度展示','客户触达','产品方案设计', '尽职调查','风险协查','贷后调查'],
        activecontent:0
      },
      tagList: [
        {
          value: '1',
          name: '客户概览',
          isShow: false,
          num: '0'
        },
        {
          value: '2',
          name: '工商信息',
          isShow: false,
          num: '0'
        },
        {
          value: '3',
          name: '投资分析',
          isShow: false,
          num: '12'
        },
        {
          value: '4',
          name: '待执行尽调任务',
          isShow: false,
          num: '0'
        },
        {
          value: '5',
          name: '正面信息',
          isShow: false,
          num: '0'
        },
        {
          value: '6',
          name: '负面信息',
          isShow: false,
          num: '0'
        },
      ],
      backNode: '',
      clockContainerNode1: '',
      clockContainerNode2: '',
      clockContainerNode3: '',
      clockContainerNode4: '',
      clockContainerNode5: '',
      clockContainerNode6: '',
      clockContainerNode7: '',
      radio: '',
    }
  },
  computed: {
    ...mapGetters({
      codeCombo: 'getCodeCombo',
      permissionList: 'getPermission',
      userInfo: 'getUserInfo',
    }),
  },
  activated() {
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.clockContainerNode1 = document.querySelector('.transition-content1');
      this.clockContainerNode2 = document.querySelector('.transition-content2');
      this.clockContainerNode3 = document.querySelector('.transition-content3');
      this.clockContainerNode4 = document.querySelector('.transition-content4');
      this.clockContainerNode5 = document.querySelector('.transition-content5');
      this.clockContainerNode6 = document.querySelector('.transition-content6');
      this.clockContainerNode7 = document.querySelector('.transition-content7');
    })
  },
  methods: {
    changeCss(val) {
      this.radio = val;
      if(this.backNode){
        switch (this.backNode)
        {
          case '1':this.clockContainerNode1.classList.add("go-left-hidden");this.clockContainerNode1.classList.remove("go-right-show");
            break;
          case '2':this.clockContainerNode2.classList.add("go-left-hidden");this.clockContainerNode2.classList.remove("go-right-show");
            break;
          case '3':this.clockContainerNode3.classList.add("go-left-hidden");this.clockContainerNode3.classList.remove("go-right-show");
            break;
          case '4':this.clockContainerNode4.classList.add("go-left-hidden");this.clockContainerNode4.classList.remove("go-right-show");
            break;
          case '5':this.clockContainerNode5.classList.add("go-left-hidden");this.clockContainerNode5.classList.remove("go-right-show");
            break;
          case '6':this.clockContainerNode6.classList.add("go-left-hidden");this.clockContainerNode6.classList.remove("go-right-show");
            break;
          case '7':this.clockContainerNode7.classList.add("go-left-hidden");this.clockContainerNode7.classList.remove("go-right-show");
            break;
        }
      }
      switch (val)
      {
        case '1':setTimeout(() => this.clockContainerNode1.classList.add("go-right-show"), 350);this.clockContainerNode1.classList.remove("go-left-hidden");
          break;
        case '2':setTimeout(() => this.clockContainerNode2.classList.add("go-right-show"), 350);this.clockContainerNode2.classList.remove("go-left-hidden");
          break;
        case '3':setTimeout(() => this.clockContainerNode3.classList.add("go-right-show"), 350);this.clockContainerNode3.classList.remove("go-left-hidden");
          break;
        case '4':setTimeout(() => this.clockContainerNode4.classList.add("go-right-show"), 350);this.clockContainerNode4.classList.remove("go-left-hidden");
          break;
        case '5':setTimeout(() => this.clockContainerNode5.classList.add("go-right-show"), 350);this.clockContainerNode5.classList.remove("go-left-hidden");
          break;
        case '6':setTimeout(() => this.clockContainerNode6.classList.add("go-right-show"), 350);this.clockContainerNode6.classList.remove("go-left-hidden");
          break;
        case '7':setTimeout(() => this.clockContainerNode7.classList.add("go-right-show"), 350);this.clockContainerNode7.classList.remove("go-left-hidden");
          break;
      }
      this.backNode = val;
      console.log('clockContainerNode', this.clockContainerNode1)
    },
  },
}
</script>

<style lang="scss" scoped>
.home-page {
  width: 100%;
  height: calc(100% - 0.3rem);
}
.tabs-content{
  width: 100%;
  height: calc(100vh - 167px);
  background-color: #ffffff;
  box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);
  border-radius: 6px;
  padding: 24px;
  display: flex;
}
.left-tag-selected {
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, rgba(0,108,225,0.08) 0%, rgba(0,108,225,0.02) 100%);
  border-radius: 6px 0px 0px 6px;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(0, 108, 225, 0.8), rgba(0, 108, 225, 0.03)) 1 1;
  margin-bottom: 16px;
  cursor: pointer;
}
.left-tag {
  width: 100%;
  height: 50px;
  border-radius: 6px 0px 0px 6px;
  border: 1px solid #F2F8FF;
  margin-bottom: 16px;
  cursor: pointer;
}
::v-deep  .el-radio__inner{
  background-color: #ffffff00 !important;
}
::v-deep  .el-radio__input.is-checked .el-radio__inner{
  border-color: #DCDFE6;
  background-color: #ffffff00;
}
::v-deep .el-radio__inner::after{
  width: 0px;
}
::v-deep .el-radio {
  color: #222222;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
}
::v-deep .el-radio__input.is-checked + .el-radio__label{
  color: #006CE1;
  font-weight: bold;
}
@keyframes trans-left {
  0% {
    float: right;
    left: 45px;
    width: 13px;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    z-index: 9999;
  }
  50% {
    width: 25px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    left: 35px;
    z-index: 9999;
    /*margin-left: -13px;*/
  }
  100% {
    width: 0px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    left: 0px;
  }
}
@keyframes trans-right {
  0% {
    width: 0px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    left: 0px;
  }
  50% {
    width: 25px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    left: 35px;
    z-index: 9999;
    /*margin-left: -13px;*/
  }
  100% {
    float: right;
    left: 45px;
    width: 13px;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    z-index: 9999;
  }
}
.transition-content1{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content2{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content3{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content4{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content5{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content6{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content7{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.go-right-show {
  background-color: #006CE1;
  animation: trans-right 0.4s linear;
  animation-fill-mode:forwards;
}
.go-left-hidden {
  background-color: #006CE1;
  animation: trans-left 0.4s linear;
  animation-fill-mode:forwards;
}
.right-content {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 0px 6px 6px 6px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(229, 241, 253, 1), rgba(229, 241, 253, 0.2)) 1 1;
  padding: 20px;
}
</style>
